<template>
  <div>
    <div class="gva-search-box">
      <!-- 搜索框区域 -->
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button
            type="primary"
            icon="plus"
            @click="openDialog('addProcess')"
        >
          新增
        </el-button>
      </div>
      <el-table
          :data="processData"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
      >

        <el-table-column
            align="left"
            label="进程名称"
            min-width="150"
            prop="processName"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="启动时间"
            min-width="150"
            prop="startTime"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="线程数"
            min-width="150"
            prop="threadCount"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="进程状态"
            min-width="150"
            prop="processStatus"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="CPU使用率"
            min-width="150"
            prop="cpuUsage"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="内存使用率"
            min-width="150"
            prop="memoryUsage"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="内存使用量（MB）"
            min-width="150"
            prop="memoryUsageMB"
            sortable="custom"
        />
        <el-table-column
            align="left"
            fixed="right"
            label="操作"
            width="150"
        >
          <template #default="scope">
            <el-button
                type="primary"
                link
                @click="goToProcessDetail(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
        <!-- 新增进程的弹窗 -->
    <el-drawer
     v-model="drawerVisible"
     title="新增进程"
     direction="rtl"
     :size="drawerSize"
     @close="resetForm"
   >
     <el-form :model="form" label-width="120px">
       <el-form-item label="进程名称">
         <el-input v-model="form.softwareId" placeholder="请输入进程名称" />
       </el-form-item>
       
       <el-form-item label="启动时间">
         <el-date-picker
           v-model="form.installationTime"
           type="date"
           placeholder="选择启动时间"
         />
       </el-form-item>
       
      
       <el-form-item label="线程数">
         <el-input v-model="form.ipAddress" placeholder="请输入线程数" />
       </el-form-item>

       <el-form-item label="进程状态">
          <el-select v-model="form.memory" placeholder="请选择类别">
            <el-option label="Running" value="Running" />
            <el-option label="Idle" value="Idle" />
            <el-option label="Stopped" value="Stopped" />
            
          </el-select>
        </el-form-item>
        <el-form-item label="CPU使用率">
         <el-input v-model="form.cpuModel" placeholder="请输入CPU使用率" />
       </el-form-item>
       <el-form-item label="内存使用率">
         <el-input v-model="form.networkCard" placeholder="请输入内存使用率" />
       </el-form-item>

       <el-form-item label="内存使用量">
         <el-input v-model="form.memoryusage" placeholder="请输入内存使用量" />
       </el-form-item>
       
     </el-form>
     <template #footer>
        <div style="text-align: right;">
         <el-button @click="drawerVisible = false">取消</el-button>
         <el-button type="primary" @click="submitForm">确定</el-button>
       </div>
     </template>
   </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const processData = ref([
  { processName: 'Process A', startTime: '2024-07-01 08:00', threadCount: 12, processStatus: 'Running', cpuUsage: '15%', memoryUsage: '20%', memoryUsageMB: 1500 },
  { processName: 'Process B', startTime: '2024-07-02 09:00', threadCount: 8, processStatus: 'Running', cpuUsage: '25%', memoryUsage: '30%', memoryUsageMB: 2500 },
  { processName: 'Process C', startTime: '2024-07-03 10:00', threadCount: 5, processStatus: 'Idle', cpuUsage: '5%', memoryUsage: '10%', memoryUsageMB: 800 },
  { processName: 'Process D', startTime: '2024-07-04 11:00', threadCount: 20, processStatus: 'Running', cpuUsage: '50%', memoryUsage: '40%', memoryUsageMB: 3500 },
  { processName: 'Process E', startTime: '2024-07-05 12:00', threadCount: 10, processStatus: 'Stopped', cpuUsage: '0%', memoryUsage: '0%', memoryUsageMB: 0 }
])
const searchInfo = ref({})

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const sortChange = ({ prop, order }) => {
  if (prop) {
    searchInfo.value.orderKey = prop
    searchInfo.value.desc = order === 'descending'
  }
  getTableData()
}

const handleSelectionChange = (val) => {
  // 处理选择变化逻辑
}

const drawerVisible = ref(false)
const drawerSize = ref('40%') // 设置Drawer的大小为屏幕的三分之一

const openDrawer = (key) => {
 drawerVisible.value = true
}

const goToProcessDetail = (row) => {
  router.push(`/process/${row.processName}`)
}


const form = ref({
 softwareId: '',
 installationTime: '',
 ipAddress: '',
 
 cpuModel: '',
 memory: '',
 networkCard: '',
 memoryusage: '',
})
 
const openDialog = (key) => {
  drawerVisible.value = true
}
 
const resetForm = () => {
 form.value = {
   softwareId: '',
   installationTime: '',
   ipAddress: '',
   
   cpuModel: '',
   memory: '',
   networkCard: '',
   memoryusage: '',
}}

</script>

<style scoped lang="scss">
.gva-search-box {
  margin-bottom: 20px;
}

.gva-table-box {
  margin-bottom: 20px;
}

.gva-btn-list {
  margin-bottom: 10px;
}

.gva-pagination {
  margin-top: 20px;
}
</style>
